<template>
	<view class="withdrawal-account-container">

<up-navbar :title="t('Withdrawal account')" @click="goWithdraw" :autoBack="true">
						<template #left>
						  <view class="nav-back-btn">
						    <image class="back-icon" src="@/static/img/left.png"></image>
						  </view>
						</template>
					</up-navbar>
		
		<view class="header-section">
			<view class="title-section">
				<text class="main-title">{{t('Withdrawal')}}</text>
				<text class="main-title">{{t('Account')}}</text>
			</view>
			<view class="credit-card-3d">
				<view class="card-body">
					<view class="card-chip"></view>
					<view class="card-logo"></view>
					<view class="card-stripe"></view>
				</view>
			</view>
		</view>

		
		<view class="form-section">
			<view class="input-group">
				<text class="input-label">{{t('Account Number')}}</text>
				<input 
					v-model="baseData.cardForm.account_num" 
					type="text"
					:placeholder="t('Enter account number')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Account Holder Name')}}</text>
				<input 
					v-model="baseData.cardForm.holder_name" 
					type="text"
					:placeholder="t('Enter holder name')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('IFSC')}}</text>
				<input 
					v-model="baseData.cardForm.ifsc" 
					type="text"
					:placeholder="t('Enter IFSC code')"
					class="form-input"
				/>
			</view>
		</view>

		
		<view class="submit-section">
			<view class="submit-button" @click="addBank">
				<text class="submit-text">{{t('Save')}}</text>
			</view>
		</view>

		
		<view class="note-section">
			<text class="note-title">{{t('Important Notes')}}</text>
			<text class="note-text">• {{t('Please ensure all information is accurate')}}</text>
			<text class="note-text">• {{t('IFSC code must be exactly 11 characters')}}</text>
			<text class="note-text">• {{t('Account holder name should contain only letters')}}</text>
		</view>


	</view>
</template>

<script setup lang="ts">
	import { useI18n } from 'vue-i18n';
	import { onMounted, reactive,ref } from 'vue'
	import { setBankCard, bankCardInfo } from '@/api/user'

	const { t } = useI18n();
	const baseData = reactive({
		aircraftUrl: uni.getStorageSync('aircraftUrl'),
		cardForm: {
			ifsc: '',
			holder_name: '',
			account_num: '',
			country:1,
			ac_type:1  ,
			platform:0
		}
	})
	const addBank = async () => {
		if (!baseData.cardForm?.ifsc || baseData.cardForm.ifsc.length !== 11) {
		  uni.showToast({
		    title: t('IFSC code must be exactly 11 characters'),
		    icon: "none"
		  });
		  return;
		}

		if (baseData.cardForm?.ifsc.charAt(4)!=0) {
			uni.showToast({
				title: t('The ffth digit of IFSC code is fixed as 0'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.account_num) {
			uni.showToast({
				title: t('Please fill in') + t('Account Number'),
				icon: "none"
			})
			return
		}
		const regex = /^\d+$/
		if (!regex.test(baseData.cardForm?.account_num)) {
			uni.showToast({
				title: t('account must be numeric'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.holder_name) {
			uni.showToast({
				title: t('Please fill in') + t('Account Holder Name'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.ifsc) {
			uni.showToast({
				title: t('Please fill in') + 'ifsc',
				icon: "none"
			})
			return
		}
		const holder_nameregex = /^[A-Za-z\s]+$/;
		if (!holder_nameregex.test(baseData.cardForm?.holder_name)) {
			uni.showToast({
				title: t('Account name error'),
				icon: "none"
			})
			return
		}
		    baseData.cardForm.holder_name = baseData.cardForm.holder_name?.replace(/\s*/g,'');
			baseData.cardForm.country=1;
			baseData.cardForm.ac_type=1;
			baseData.cardForm.platform=0;
		const res = await setBankCard(baseData.cardForm)
		if (res.code == 0) {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
			goWithdraw()
		} else {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
		}
	}
	const goWithdraw = () => {
		window.top?.postMessage('/pages/withdraw/index', window.location.origin)
		uni.navigateTo({
		  url: '/pages/withdraw/index',
		})
	}
	const getCard = async () => {
		const ress = await bankCardInfo({country:1,platform:0})
		if (ress.code == 0) {
			baseData.cardForm = ress.data.length > 0 ? ress.data[0] : {
				ifsc: '',
				holder_name: '',
				account_num: '',
			}
			console.log("baseData.cardForm**** ",baseData.cardForm )
		}
	}
	onMounted(() => {
		
		uni.setNavigationBarTitle({
			title: 'task!' + t('Earn money so easy') + '!' 
		});
		getCard()
	});
</script>

<style lang="scss" scoped>
@import '@/styles/bank.scss';
</style>
